<template>
  <div>
    <div>
      <div class="search">
        <input type="text" value="" id="name" placeholder="请输入艺人姓名/艺名"/>
        <div class="search_text" @click="submit"><span>搜索</span></div>
        <div style="width: 1px;height:30px;background: white "/>
        <div class="search_all_text" @click="onClear"><span>清除选项</span></div>
      </div>
    </div>
    <el-collapse style="margin-top: 10px;border: white" v-model="activeNames" @change="handleChange">
      <el-collapse-item title="标签选择" name="1">
        <div class="sideContent">
          <div class="typeArea" v-if="isRefreshTag">
            <div class="typeArea_left">
              <ul>
                <li>性别：</li>
                <li>职业：</li>
                <li>语言：</li>
                <li>年龄：</li>
                <li>身高：</li>
                <li>期望薪资：</li>
                <li>粉丝：</li>

                <li>标签（多选）:</li>
              </ul>
            </div>
            <div class="typeArea_right">
              <div class="typeArea_item" style="height: 48px;">
                <div class="item" :class="form.sex === '0'?'tagSelect':'tagUnSelect'" @click="form.sex='0'">不限</div>
                <div class="item" :class="form.sex === '1' ? 'tagSelect':'tagUnSelect'" @click="form.sex='1'">男</div>
                <div class="item" :class="form.sex === '2' ? 'tagSelect':'tagUnSelect'" @click="form.sex='2'">女</div>
              </div>
              <div class="typeArea_item" style="height: 46px;">
                <div style="padding: 0px 4px" v-for="item in jobsList">
                  <span :class="item.isClick == true ? 'tagSelect':'tagUnSelect'"
                        @click="onJobsClick(item.classificationID)">{{item.classificationName}}</span>
                </div>
              </div>
              <div class="typeArea_item" style="height: 48px;">
                <div style="padding: 0px 4px" v-for="item in languagesList">
                  <span :class="item.isClick == true ? 'tagSelect':'tagUnSelect'"
                        @click="onLanguagesClick(item.classificationID)">{{item.classificationName}}</span>
                </div>
              </div>

              <div class="typeArea_item">
                <ul>
                  <li v-for="item in ageList">
              <span :class="item.isClick == true ? 'tagSelect':'tagUnSelect'"
                    @click="onAgeClick(item.value)">
                {{item.label}}
              </span>
                  </li>
                </ul>
                <span class="typeArea_btns">
            <input @blur="onChangeAge" oninput="if(value.length > 3)value = value.slice(0, 3)" v-model="form.startAge"
                   type="number"/> <span>~</span>
            <input @blur="onChangeAge" oninput="if(value.length > 3)value = value.slice(0, 3)" v-model="form.endAge"
                   type="number"/>
                  <!-- <button class="confirm">确定</button> -->
          </span>
              </div>
              <div class="typeArea_item">
                <ul>
                  <li v-for="item in heightList">
                    <span :class="item.isClick == true ? 'tagSelect':'tagUnSelect'"
                          @click="onHeightClick(item.value)">
                {{item.label}}
              </span>
                  </li>
                </ul>
                <span class="typeArea_btns">
            <input @blur="onChangeHeight" oninput="if(value.length > 3)value = value.slice(0, 3)"
                   v-model="form.startHeight"
                   type="number"/> <span>~</span>
            <input @blur="onChangeHeight" oninput="if(value.length > 3)value = value.slice(0, 3)"
                   v-model="form.endHeight" type="number"/>
                  <!-- <button class="confirm">确定</button> -->
          </span>
              </div>
              <div class="typeArea_item">
                <div class="item_select">
                  <template>
                    <el-select v-model="form.salaryType" placeholder="请选择">
                      <el-option
                        v-for="item1 in salaryList"
                        :key="item1.value"
                        :label="item1.label"
                        :value="item1.value"
                      ></el-option>
                    </el-select>
                  </template>
                </div>
                <ul style="margin-left: 10px">
                  <li v-for="item in priceList">
                    <span :class="item.isClick == true ? 'tagSelect':'tagUnSelect'"
                          @click="onPriceClick(item.value)">
                {{item.label}}
                  </span>
                  </li>
                </ul>
                <span class="typeArea_btns">
            <input @blur="onChangePrice" oninput="if(value.length > 9)value = value.slice(0, 9)"
                   v-model="form.startSalary"
                   type="number"/> <span>~</span>
            <input @blur="onChangePrice" oninput="if(value.length > 9)value = value.slice(0, 9)"
                   v-model="form.endSalary" type="number"/>
                  <!-- <button class="confirm">确定</button> -->
          </span>
              </div>
              <div class="typeArea_item">
                <div class="item_select">
                  <template>
                    <el-select v-model="form.fansType" placeholder="请选择">
                      <el-option
                        v-for="item in fansList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </template>
                </div>
                <ul style="margin-left: 10px">
                  <li v-for="item in fansCountList">
                    <span :class="item.isClick == true ? 'tagSelect':'tagUnSelect'"
                          @click="onFansClick(item.value)">
                {{item.label}}
                  </span>
                  </li>
                </ul>
                <span class="typeArea_btns">
            <input @blur="onChangeFans" oninput="if(value.length > 10)value = value.slice(0, 10)" v-model="form.startFans"
                   type="number"/> <span>~</span>
            <input @blur="onChangeFans" oninput="if(value.length > 10)value = value.slice(0, 10)" v-model="form.endFans"
                   type="number"/>
                  <!-- <button class="confirm">确定</button> -->
          </span>
              </div>
              <div class="tagType">
                <div class="item" v-for="itemP in tagList">
                  {{itemP.classificationName}}:
                  <div style="padding-left: 20px" v-for="itemC in itemP.Classification">
          <span :class="itemC.isClick == true ? 'tagSelect':'tagUnSelect'"
                @click="onTagClick(itemP.classificationID,itemC.classificationID)">
          {{itemC.classificationName}}
          </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeNames: ['1'],
        form: {
          startAge: 0,
          endAge: 0,
          startHeight: 0,
          endHeight: 0,
          salaryType: 0,
          startSalary: 0,
          endSalary: 0,
          fansType: 0,
          startFans: 0,
          endFans: 0,
          typeID: '',
          languageID: '',
          jobID: '',
          sex: '0'
        },
        ageList: [{
          value: '1',
          label: '6岁以下',
          startAge: 0,
          endAge: 6,
          isClick: false
        }, {
          value: '2',
          label: '7-12岁',
          startAge: 7,
          endAge: 12,
          isClick: false
        }, {
          value: '3',
          label: '13-17岁',
          startAge: 13,
          endAge: 17,
          isClick: false
        }, {
          value: '4',
          label: '18-25岁',
          startAge: 18,
          endAge: 25,
          isClick: false
        }, {
          value: '5',
          label: '26-35岁',
          startAge: 26,
          endAge: 35,
          isClick: false
        }, {
          value: '6',
          label: '36-45岁',
          startAge: 36,
          endAge: 45,
          isClick: false
        }, {
          value: '7',
          label: '46-59岁',
          startAge: 46,
          endAge: 59,
          isClick: false
        }, {
          value: '8',
          label: '60岁以上',
          startAge: 60,
          endAge: 120,
          isClick: false
        }],
        heightList: [{
          value: '1',
          label: '99厘米以下',
          startHeight: 0,
          endHeight: 99,
          isClick: false
        }, {
          value: '2',
          label: '100-149厘米',
          startHeight: 100,
          endHeight: 149,
          isClick: false
        }, {
          value: '3',
          label: '150-159厘米',
          startHeight: 150,
          endHeight: 159,
          isClick: false
        }, {
          value: '4',
          label: '160-169厘米',
          startHeight: 160,
          endHeight: 169,
          isClick: false
        }, {
          value: '5',
          label: '170-179厘米',
          startHeight: 170,
          endHeight: 179,
          isClick: false
        }, {
          value: '6',
          label: '180厘米以上',
          startHeight: 180,
          endHeight: 250,
          isClick: false
        }],
        priceList: [{
          value: '1',
          label: '199元以下',
          startSalary: 0,
          endSalary: 199,
          isClick: false
        }, {
          value: '2',
          label: '200-799元',
          startSalary: 200,
          endSalary: 799,
          isClick: false
        }, {
          value: '3',
          label: '800-1499元',
          startSalary: 800,
          endSalary: 1499,
          isClick: false
        }, {
          value: '4',
          label: '1500-2999元',
          startSalary: 1500,
          endSalary: 2999,
          isClick: false
        }, {
          value: '5',
          label: '3000-5999元',
          startSalary: 3000,
          endSalary: 5999,
          isClick: false
        }, {
          value: '6',
          label: '6000以上',
          startSalary: 6000,
          endSalary: 100000000,
          isClick: false
        }],
        fansCountList: [{
          value: '1',
          label: '9万以下',
          startFans: 0,
          endFans: 9,
          isClick: false
        }, {
          value: '2',
          label: '10-29万',
          startFans: 10,
          endFans: 29,
          isClick: false
        }, {
          value: '3',
          label: '30-99万',
          startFans: 30,
          endFans: 99,
          isClick: false
        }, {
          value: '4',
          label: '100-299万',
          startFans: 100,
          endFans: 299,
          isClick: false
        }, {
          value: '5',
          label: '300万以上',
          startFans: 300,
          endFans: 1000000000,
          isClick: false
        }],
        checkboxGroup: [[], [], [], [], [], []],
        isRefreshTag: true,
        tagList: [],
        languagesList: [],
        jobsList: [],
        salaryList: [],
        tagsListPlace: [],
        tagsOptions: [],
        options: [],
        cityListPlace: [],
        selectOptions: [],
        fansList: [],
      };
    },
    mounted(){
      console.log("111111111");
      this.getCity();
    }
    ,
    methods: {
      // 获取城市列表
      getCity()
      {
        let self = this;
        console.log("22222222");
        //薪资
        self.$fetch("/Category/getCategory", {gid: '5'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.salaryList = res.data.Classification;
            self.salaryList.splice(0, 0, {
              "value": "0",
              "label": "不选择",
            });
            self.form.salaryType = self.salaryList[0].value;
          }
        });
        // 粉丝类型
        self.$fetch("/Category/getCategory", {gid: '7'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.fansList = res.data.Classification;
            self.fansList.splice(0, 0, {
              "value": "0",
              "label": "不选择",
            });
            self.form.fansType = self.fansList[0].value;
          }
        });
        // 职业类型
        self.$fetch("/Category/getCategory", {gid: '4'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.languagesList = res.data.Classification;
          }
        });
        // 职业类型
        self.$fetch("/Category/getCategory", {gid: '1'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.jobsList = res.data.Classification;
          }
        });
        self.$fetch("/User/getActorCate", {token: this.globalData.token}).then(res => {
            if (res.code === "200") {
              console.log(res);
              self.tagList = res.data.Classification;
            }
          }
        );
      },
      /**
       * 选择年龄
       * @param id 年龄id
       */
      onAgeClick(id){
        for (let i = 0; i < this.ageList.length; i++) {
          let p = this.ageList[i];
          if (p.value === id) {
            p.isClick = !p.isClick;
            if (p.isClick) {
              this.form.startAge = p.startAge;
              this.form.endAge = p.endAge;
            } else {
              this.form.startAge = 0;
              this.form.endAge = 0;
            }
          } else {
            p.isClick = false;
          }
          this.isRefreshTag = false;
          this.isRefreshTag = true;
        }
      },
      /**
       * 选择身高
       * @param id 身高id
       */
      onHeightClick(id){
        for (let i = 0; i < this.heightList.length; i++) {
          let p = this.heightList[i];
          if (p.value === id) {
            p.isClick = !p.isClick;
            if (p.isClick) {
              this.form.startHeight = p.startHeight;
              this.form.endHeight = p.endHeight;
            } else {
              this.form.startHeight = 0;
              this.form.endHeight = 0;
            }
          } else {
            p.isClick = false;
          }
          this.isRefreshTag = false;
          this.isRefreshTag = true;
        }
      },
      /**
       * 选择薪资
       * @param id 薪资id
       */
      onPriceClick(id){
        for (let i = 0; i < this.priceList.length; i++) {
          let p = this.priceList[i];
          if (p.value === id) {
            p.isClick = !p.isClick;
            if (p.isClick) {
              this.form.startSalary = p.startSalary;
              this.form.endSalary = p.endSalary;
            } else {
              this.form.startSalary = 0;
              this.form.endSalary = 0;
            }
          } else {
            p.isClick = false;
          }
          this.isRefreshTag = false;
          this.isRefreshTag = true;
        }
      },
      /**
       * 选择粉丝
       * @param id 粉丝id
       */
      onFansClick(id){
        for (let i = 0; i < this.fansCountList.length; i++) {
          let p = this.fansCountList[i];
          if (p.value === id) {
            p.isClick = !p.isClick;
            if (p.isClick) {
              this.form.startFans = p.startFans;
              this.form.endFans = p.endFans;
            } else {
              this.form.startFans = 0;
              this.form.endFans = 0;
            }
          } else {
            p.isClick = false;
          }
          this.isRefreshTag = false;
          this.isRefreshTag = true;
        }
      },
      onJobsClick(id){
        for (let i = 0; i < this.jobsList.length; i++) {
          let item = this.jobsList[i];
          if (item.classificationID === id) {
            item.isClick = !item.isClick;
            this.isRefreshTag = false;
            this.isRefreshTag = true;
          }
        }
      },
      onLanguagesClick(id){
        for (let i = 0; i < this.languagesList.length; i++) {
          let item = this.languagesList[i];
          if (item.classificationID === id) {
            item.isClick = !item.isClick;
            this.isRefreshTag = false;
            this.isRefreshTag = true;
          }
        }
      },
      /**
       * 选择标签
       * @param pid 父标签id
       * @param id 子标签id
       */
      onTagClick(pid, id){
        for (let i = 0; i < this.tagList.length; i++) {
          let p = this.tagList[i];
          if (p.classificationID === pid) {
            for (let j = 0; j < p.Classification.length; j++) {
              let c = p.Classification[j];
              if (c.classificationID === id) {
                c.isClick = !c.isClick;
                this.isRefreshTag = false;
                this.isRefreshTag = true;
              }
            }
          }
        }
      },
      /**
       * 提交选择项去搜索
       */
      submit(){
        this.form.keywords = document.getElementById("name").value;
        //职业
        this.form.jobID = '';
        for (let i = 0; i < this.jobsList.length; i++) {
          if (this.jobsList[i].isClick) {
            this.form.jobID += this.jobsList[i].classificationID + ',';
          }
        }
        if (this.form.jobID !== '') {
          let jobID = this.form.jobID;
          this.form.jobID = jobID.substring(0, jobID.length - 1);
        }
        //语言
        this.form.languageID = '';
        for (let i = 0; i < this.languagesList.length; i++) {
          if (this.languagesList[i].isClick) {
            this.form.languageID += this.languagesList[i].classificationID + ',';
          }
        }
        if (this.form.languageID !== '') {
          let languageID = this.form.languageID;
          this.form.languageID = languageID.substring(0, languageID.length - 1);
        }
        //标签
        this.form.typeID = '';
        for (let i = 0; i < this.tagList.length; i++) {
          let p = this.tagList[i];
          for (let j = 0; j < p.Classification.length; j++) {
            let c = p.Classification[j];
            if (c.isClick) {
              this.form.typeID += c.classificationID + ',';
            }
          }
        }
        if (this.form.typeID !== '') {
          let typeID = this.form.typeID;
          this.form.typeID = typeID.substring(0, typeID.length - 1);
        }
        this.$emit('onSearchActor', this.form);
      },
      /**
       * 清除所有选项
       */
      onClear(){
        //年龄
        for (let i of this.ageList) {
          i.isClick = false;
        }
        //身高
        for (let i of this.heightList) {
          i.isClick = false;
        }
        //薪资
        for (let i of this.priceList) {
          i.isClick = false;
        }
        //粉丝
        for (let i of this.fansCountList) {
          i.isClick = false;
        }
        this.form.keywords = '';
        this.form.startAge = 0;
        this.form.endAge = 0;
        this.form.startHeight = 0;
        this.form.endHeight = 0;
        this.form.salaryType = this.salaryList[0].value;
        this.form.startSalary = 0;
        this.form.endSalary = 0;
        this.form.fansType = this.fansList[0].value;
        this.form.startFans = 0;
        this.form.endFans = 0;
        this.form.typeID = '';
        this.form.sex = '0';
        for (let i = 0; i < this.tagList.length; i++) {
          let p = this.tagList[i];
          for (let j = 0; j < p.Classification.length; j++) {
            let c = p.Classification[j];
            c.isClick = false;
          }
        }
        for (let i = 0; i < this.jobsList.length; i++) {
          this.jobsList[i].isClick = false;
        }
        this.form.languageID = '';
        for (let i = 0; i < this.languagesList.length; i++) {
          this.languagesList[i].isClick = false;
        }
        this.form.jobID = '';
        this.isRefreshTag = false;
        this.isRefreshTag = true;
        this.$emit('onSearchClear', null);
      },
      onChangeAge(){
        for (let v of this.ageList) {
          v.isClick = false;
        }
      },
      onChangeHeight(){
        for (let v of this.heightList) {
          v.isClick = false;
        }
      },
      onChangePrice(){
        for (let v of this.priceList) {
          v.isClick = false;
        }
      },
      onChangeFans(){
        for (let v of this.fansList) {
          v.isClick = false;
        }
      }
    }
  }
  ;
</script>

<style lang="less">
  .sideContent {
    width: 100%;
    display: flex;
    flex-direction: row;
    font-size: 12px;
    .typeArea {
      // width: 80%;
      // margin-left: 10%;
      height: 100%;
      display: flex;
      flex-direction: row;
      padding: 10px 15px;
      .typeArea_left {
        display: flex;
        flex-direction: row;
        width: 80px;
        font-weight: 500;
        ul {
          display: flex;
          flex-direction: column;
          padding-left: 0px;
          li {
            padding-bottom: 26px;
          }
        }
      }
      .typeArea_right {
        flex: 1;
        .typeArea_item {
          display: -webkit-flex;
          -webkit-flex-direction: row;
          display: flex;
          flex-direction: row;
          align-items: center;
          .item_select {
            width: 100px;
            .el-input__inner {
              height: 24px;
              line-height: 24px;
            }
            .el-input__icon {
              line-height: 20px;
            }
            .el-input {
              font-size: 10px;
            }
          }
          ul {
            display: flex;
            flex-direction: row;
            color: #999;
            flex: 1;
            padding-left: 0px;
            li {
              display: flex;
              flex-direction: row;
              // padding-bottom: 30px;
              padding-right: 20px;
            }
            .appearance_left {
              ul {
                display: flex;
                flex-direction: column;
                font-weight: 500;
              }
            }
          }
          .typeArea_btns {
            display: flex;
            flex-direction: row;
            align-items: center;
            span {
              margin-left: 4px;
              margin-right: 4px;
            }
            input {
              width: 50px;
            }
          }
          .item {
            font-size: 10px;
            padding: 0px 10px;
            text-align: center;
          }
        }
      }
    }
    .tagType {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      .item {
        display: flex;
        flex-direction: row;
        padding: 10px 0px;
        flex-wrap: wrap;
        color: #999;
        font-size: 10px;
      }
    }
  }

  .tagSelect {
    color: white;
    background: #f45454;
    border-color: #f45454;
    border-radius: 4px;
    padding: 0px 4px;
  }

  .tagUnSelect {
    color: #999;
    background: white;
    padding: 0px 4px;
  }

  ul {
    li {
      list-style: none;
      padding-left: 0px;
    }
  }

  .search {
    display: flex;
    flex-direction: row;
    align-items: center;
    input {
      width: 200px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      height: 26px;
      padding-left: 16px;
      color: black;
      border: 1px solid #f7f8fa;
      font-size: 12px;
      background-color: #f0f0f0;
      outline: none;
    }
    .search_all_text {
      background-color: #8c94a7;
      height: 30px;
      width: 100px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 12px;
        color: white;
        letter-spacing: 0.6px;
      }
    }
    .search_text {
      background-color: #8c94a7;
      height: 30px;
      width: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 12px;
        color: white;
        letter-spacing: 0.6px;
      }
    }
  }
</style>
